<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<!-- saved from url=(0048)http://www.rmsjr.com/RMSforms/RMSforms-v0.5.html -->
<html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

<title>RMSforms Example Page</title>
<!-- <link rel="stylesheet" type="text/css" href="reset.css"> -->
<link rel="stylesheet" type="text/css" href="./RMSforms Example Page_files/style.css">
<link rel="stylesheet" type="text/css" href="./RMSforms Example Page_files/RMSforms-v0.5.css">

</head> 
<body>

<div class="formContainer">

	<span class="requiredDesignation required">Designates Required Fields</span>
    
    <form action="">
    
    <h2>Vertical Form 1a <em>(DEFAULT FORM)</em> :: Vertical &lt;Li&gt;, Horizontal &lt;Label&gt;, Horizontal &lt;Input&gt; :: <em>class = form</em></h2>
    <fieldset>
    <legend>This is a legend</legend>
    <ul class="form">
    	<li><label>label</label><input type="text"><span class="leftNote">This is a note</span></li>
        <li class="required"><label>label</label><input type="text"><span class="bottomNote offset1">This is a note</span></li>
        <li><label>label</label><select><option></option></select></li>
        <li><label>label</label><input type="radio"></li>
        <li><label>label</label><input type="checkbox"></li>
        <li><label>This is a label that is long enough to go onto three lines</label><textarea rows="5" cols="40"></textarea></li>
    </ul>
    </fieldset>
    
    <h2>Vertical Form 1b :: Vertical &lt;Li&gt;, Horizontal &lt;Label&gt; (Text Align Right), Horizontal &lt;Input&gt; :: <em>class = form tar</em></h2>
    <fieldset>
    <legend>This is a legend</legend>
   <ul class="form tar">
    	<li><label>label</label><input type="text"><span class="leftNote">This is a note</span></li>
        <li class="required"><label>label</label><input type="text"><span class="bottomNote offset1">This is a note</span></li>
        <li><label>label</label><select><option></option></select></li>
        <li><label>label</label>
        
        	<input type="radio">
          
        
        </li>
        <li><label>label</label><input type="checkbox"> </li>
        <li><label>This is a label that is long enough to go onto three lines</label><textarea rows="5" cols="40"></textarea></li>
    </ul>
    </fieldset>
    
    
     
     <h2>Vertical Form 2 :: <em>V</em>ertical &lt;Li&gt;, <em>V</em>ertical &lt;Label&gt;, <em>V</em>ertical &lt;Input&gt;:: <em>modifier class = "vvv"</em></h2>
     <fieldset>
       <legend>This is a legend</legend>
  <ul class="form vvv">
    	<li><label>label</label><input type="text"><span class="leftNote">This is a note</span></li>
        <li class="required"><label>label</label><input type="text"><span class="bottomNote">This is a note</span></li>
        <li><label>label</label><select><option></option></select></li>
        <li><label>label</label><input type="radio"></li>
        <li><label>label</label><input type="checkbox"></li>
        <li><label>label</label><textarea rows="5" cols="40"></textarea></li>
    </ul>
    </fieldset>
    
     <h2>Horizontal Form 1 :: <em>H</em>orizontal &lt;Li&gt;, <em>V</em>ertical &lt;Label&gt;, <em>V</em>ertical &lt;Input&gt; :: <em> modifier class = "hvv"</em></h2>
    <fieldset>
    <legend>This is a legend</legend>
    <ul class="form hvv">
    	<li><label class="h"><em>label with label modifier = "h"</em></label><input type="text"><span class="leftNote">This is a note</span></li>
        <li class="required"><label>label</label><input type="text"><span class="bottomNote">This is a note</span></li>
        <li><label>label</label><select><option></option></select></li>
        <li><label>label</label><input type="radio"></li>
        <li><label>label</label><input type="checkbox"></li>
        <li><label>label</label><textarea rows="5" cols="40"></textarea></li>
    </ul>
    </fieldset>
    
    
    
      <h2>Horizontal Form 2 :: <em>H</em>orizontal &lt;Li&gt;, <em>I</em>nline &lt;Label&gt;,  <em>I</em>nline &lt;Input&gt; :: <em>modifier class = "hii"</em></h2>
    <fieldset>
    <legend>This is a legend</legend>
    <ul class="form hii">
    	<li><label>label</label><input type="text"><span class="leftNote">This is a note</span></li>
        <li class="required"><label>label</label><input type="text"><span class="bottomNote">This is a note</span></li>
        <li><label>label</label><select><option></option></select></li>
        <li><label>label</label><input type="radio"></li>
        <li><label>label</label><input type="checkbox"></li>
        <li><label class="v"><em>label with label modifier = "v"</em></label><textarea rows="5" cols="40"></textarea></li>
    </ul>
    </fieldset>
    
    
    <h2>Horizontal Form 3 :: <em>H</em>orizontal &lt;Li&gt;, <em>H</em>orizontal &lt;Label&gt;,  <em>H</em>orizontal &lt;Input&gt; :: <em>modifier class = "hhh"</em></h2>
    <fieldset>
    <legend>This is a legend</legend>
    <ul class="form hhh tar">
    	<li><label>label</label><input type="text"><span class="leftNote">This is a note</span></li>
        <li><label>label</label><input type="text"><span class="bottomNote offset2">This is a note</span></li>
        <li><label>label</label><select><option></option></select></li>
        <li><label>label</label><input type="radio"></li>
        <li><label>label</label><input type="checkbox"></li>
        <li class="cb"><label class="v"><em>label with label modifier = "v"</em></label><textarea rows="5" cols="40"></textarea></li>
    </ul>
    </fieldset>
     


<h2>Multiple Vertical Forms Layed Out Horizonally :: <em>outer ul class = "form hvv"</em></h2>
 <fieldset>
    <legend>This is a legend</legend>
	<ul class="form hvv">
        <li>
        	<label>FORM 1:<br><em>modifier class = vii</em></label>
        		 <ul class="vii ">
                    <li><label>label</label><select><option>label</option></select></li>
                    <li><label>label</label><select><option>label</option></select></li>
                    <li><label>label</label><select><option>label</option></select></li>
                    <li><label>label</label><input type="text"></li>
                  	<li><label>label</label><input type="checkbox"></li>
   				 </ul>
        
        </li>
        
        
         
        <li> 
        		<label>FORM 2:<br><em>modifier class = vhh</em></label>
         		<ul class="vhh">
                    <li><label>label</label><input type="text"><span class="leftNote">this is a note<br>that is more than <br> two lines </span></li>
                    <li><label>labeldd </label><input type="text"></li>
                    <li><label>Tedst</label><input type="text"></li>
                    <li><label>label</label><input type="text"></li>
                    <li><label>label</label><input type="text"></li>
   				 </ul></li>
        <li>
        <label>FORM 3:<br><em>modifier class = vvv </em></label>
         <ul class="vvv">
            <li><label>label</label><input type="text"><span class="leftNote">This is a note</span></li>
            <li><label>label</label><input type="text"><span class="bottomNote">This is a note</span></li>
            <li><label>label</label><input type="text"></li>
            <li><label>label</label><input type="text"></li>
            <li><label>label</label><input type="text"></li>
            <li><label>label</label><input type="text"></li>
            <li><label>label</label><input type="text"></li>
            <li><label>This is a long label over a textarea</label><textarea rows="5" cols="40"></textarea></li>
   		 </ul>
        
        
        
        </li>
        
    </ul>
    </fieldset>



<h2>Multiple Horizontal Forms Layed Out Vertically</h2>
 <fieldset>
    <legend>This is a legend</legend>
	<ul class="form"> 
    <li>
    <label>FORM 1: <br><em>modifier class = "hvv"</em></label>
        <ul class="hvv required">
            <li><label>label</label><input type="checkbox"></li>
            <li><label>Long label within a horizontal form</label><select><option>label</option></select></li>
            <li><label>label</label><input type="text"></li>
            <li><label>label</label><input type="text"></li>
            
        </ul>
   </li>
    <li>
    <label>FORM 2: <br><em>modifier class = "hii"</em></label>
        <ul class="hii required">
            <li><label>label</label><input type="checkbox"></li>
            <li><label>label</label><select><option>label</option></select></li>
            <li>
              <label>label</label>
              <input type="text"></li>
            <li><label>label</label><input type="text"></li>
         </ul>
   </li>
    <li>
     <label>FORM 3: <br><em>modifer class = "hhh"</em></label>
        <ul class="hhh required">
            <li><label>label</label><input type="checkbox"></li>
            <li><label>label</label><select><option>label</option></select></li>
            <li><label>label</label><input type="text"><span class="bottomNote offset2">this is a note</span></li>
            <li><label>label</label><input type="text"></li>
           
        </ul>
   </li>
   
   
    </ul>
    </fieldset>
    
 
    <h2>Multi Select Box</h2>
     <fieldset>
    <legend>This is a legend</legend>
    <ul class="form hvv">
    
    <li>
    <label>Hey, this is a multi select box <br><em>Modifier class = "vhh"</em></label>
    <div class="multiSelect"> 
    
         <ul class="form vhh ">
            <li class="required"><input type="checkbox"><label>label</label></li>
            <li><input type="checkbox"><label>label</label></li>
            <li><input type="checkbox"><label>label</label></li>
            <li class="required"><input type="checkbox"><label>label</label></li>
            <li><input type="checkbox"><label>label</label></li>
            <li class="required"><input type="checkbox"><label>label</label></li>
            <li><input type="checkbox"><label>label</label></li>
            <li><input type="checkbox"><label>label</label></li>
            <li class="required"><input type="checkbox"><label>label label label label label label </label></li>
            <li><input type="checkbox"><label>label</label></li>
            <li class="required"><input type="checkbox"><label>label</label></li>
            <li><input type="checkbox"><label>label</label></li>
            <li><input type="checkbox"><label>label</label></li>
            <li class="required"><input type="checkbox"><label>label</label></li>
            <li><input type="checkbox"><label>label</label></li>
            <li class="required"><input type="checkbox"><label>label</label></li>
            <li><input type="checkbox"><label>label label label label label label label label</label></li>
            <li><input type="checkbox"><label>label</label></li>
            <li class="required"><input type="checkbox"><label>label</label></li>
            <li><input type="checkbox"><label>label</label></li>
        </ul>
    </div>
    </li>
    
    <li>
     <label>So Is this <br><em>Modifier class = "vii"</em></label>
    <div class="multiSelect">
         <ul class="form vii ">
            <li class="required"><input type="checkbox"><label>label</label></li>
            <li><input type="checkbox"><label>label</label></li>
            <li><input type="checkbox"><label>label</label></li>
            <li class="required"><input type="checkbox"><label>label</label></li>
            <li><input type="checkbox"><label>label</label></li>
            <li class="required"><input type="checkbox"><label>label label label label label label label label</label></li>
            <li><input type="checkbox"><label>label</label></li>
            <li><input type="checkbox"><label>label</label></li>
            <li class="required"><input type="checkbox"><label>label</label></li>
            <li><input type="checkbox"><label>label</label></li>
            <li class="required"><input type="checkbox"><label>label</label></li>
            <li><input type="checkbox"><label>label</label></li>
            <li><input type="checkbox"><label>Tes fds fds fds fsdfdsfds fsfdsfdsf ds dst</label></li>
            <li class="required"><input type="checkbox"><label>label</label></li>
            <li><input type="checkbox"><label>label</label></li>
            <li class="required"><input type="checkbox"><label>label</label></li>
            <li><input type="checkbox"><label>label</label></li>
            <li><input type="checkbox"><label>label</label></li>
            <li class="required"><input type="checkbox"><label>label</label></li>
            <li><input type="checkbox"><label>label</label></li>
        </ul>
    </div>
    </li>
    
       
    </ul>
    </fieldset>
    
     
    
    
    </form>
</div>



</body></html>